// 样式-自定义配色
import React from 'react';
import { Radio } from 'antd';
import FormItem from 'antd/lib/form/FormItem';
import DataColor from '../DataColor';
import ColorSection from '../ColorSection';
// import { filterObjectNullKeys } from 'src/libs/utils';
// import Editor from '../Editor';

interface IProps {
	config: any;
	onValuesChange: ( chartType: string, key: string, values: Object, configType: string ) => void;
	form: any;
}

const MapCustomColor = ( props: IProps ) => {
	// const { Panel } = Collapse;
	const { config, onValuesChange, form } = props;
	// console.log( config );
	return (
		<div key="maplabel">
			<FormItem label="类型" name="customColorType" labelAlign="left" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
				<Radio.Group>
					<Radio value="continuous">颜色渐变</Radio>
					<Radio value="piecewise">颜色分段</Radio>
				</Radio.Group>
			</FormItem>
			{ config.style.customColorType === 'continuous' && 
			<DataColor config={config} form={form} onValuesChange={onValuesChange}></DataColor>}
			{ config.style.customColorType === 'piecewise' && 
			<ColorSection config={config} form={form} onValuesChange={onValuesChange}></ColorSection>}
		</div>
	);
};

export default React.memo( MapCustomColor );
